<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
    .box{
            width: 840px;
            padding: 100px 250px;
            box-sizing: border-box;
            
        }
    .one{
        color: red;
    }
    </style>
</head>
<body>
    <div class="b0x">
        <h1>2403抽奖</h1>
        <h1>一等奖<span class="one">???</span></h1>
        <h2>二等奖<span class=two">???</span></h2>
        <h3>三等奖<span class="three">???</span></h3>
    </div>
    <script>
         const personArr = ['周杰伦', '刘德华', '周星驰', '范老师', '张学友'];
        //  const arr = ['one','two','three'];
        // for(let i=0;i<arr.length;i++)
        for(let i = 0;i<3;i++){
            // const span = document.querySelector('.'+arr[i])
            const span = document.querySelectorAll('span')
            const ran =Math.floor(Math.random() * personArr.length)
            span[i].innerHTML = personArr[ran]
            //  span.innerHTML = personArr[ran]
            personArr.splice(ran,1)
        }
        // 一等奖
        // console.log(personArr);
        // const span1 = document.querySelector('.one')
        // const ran1 = Math.floor(Math.random()*personArr.length)
        // personArr.splice(ran1,1)
        // console.log(personArr);
        
    </script>
</body>
</html>